export const addImageList = (editor, opts) => {
  const { Components } = editor;
  const { id, label } = opts;

  const listPfx = opts.classPrefix;
  const idContainer = `${id}-container`;
  const idListLink = `${id}-list-link`;
  const idListImage = `${id}-list-image`;

  Components.addType(id, {
    model: {
      defaults: {
        name: label,
        attributes: { class: listPfx },
        components: { type: idContainer },
        styles:
          (opts.style ||
            `
          .${listPfx} {
            padding: 0;
            margin: 0;
            width: 100%;
            display: flex;
          }

          .${listPfx}-container {
            list-style-type: square;
            padding-left: 0;
            margin: 0 auto;
            width: 96%;
            display: flex;
            align-items: flex-start;
            margin-bottom: 10px;
          }
          
          .${listPfx}-container img {
            object-fit: cover;
            margin-right: 20px;
          }

          .${listPfx}-text-container {
            width:90%;
            list-style-type: square;
            padding-left: 0;
            margin: 0;
          }

          .${listPfx}-text-container li {
            border-bottom: 1px dotted #000;
            padding:2px;
            margin-bottom: 5px;
          }
            
          .${listPfx}-text-container li a {
            width:100%;
            display: block; 
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding-left: 0;
            margin: 0;
          }
        `) + opts.styleAdditional,
      },
    },
  });

  Components.addType(idContainer, {
    model: {
      defaults: {
        attributes: {
          class: `${listPfx}-container`,
          "data-gjs": "image-list",
        },
        name: "Image List Container",
        draggable: false,
        removable: false,
        copyable: false,
        highlightable: false,
        components: [
          { type: idListImage, attributes: { alt: "Image" } },
          {
            tagName: "ul",
            attributes: { class: `${listPfx}-text-container` },
            components: [
              {
                tagName: "li",
                components: [{ type: idListLink, components: "基础实验3室" }],
              },
              {
                tagName: "li",
                components: [{ type: idListLink, components: "多功能实训室" }],
              },
            ],
          },
        ],
      },
    },
  });

  Components.addType(idListLink, {
    extend: "link",
    model: {
      defaults: {
        name: "List Link",
        draggable: `[data-gjs-type="${idContainer}"]`,
      },
    },
  });

  Components.addType(idListImage, {
    extend: "image",
    model: {
      defaults: {
        name: "List Image",
        tagName: 'img',
        traits: [
          {
            type: 'alt',
            name: 'alt',
            label: 'alt',
            default: 'Image',
          },
          {
            type: 'text',
            name: 'href',
            label: 'Href',
            default: '',
          },
          {
            type: 'select',
            name: 'target',
            label: 'Target',
            options: [
              { id: '_self', label: '此窗口' },
              { id: '_blank', label: '新窗口' },
            ],
            default: '_self'
          }
        ],
        script: function() {
          const href = this.getAttribute('href');
          const target = this.getAttribute('target');
          this.style.cursor = 'pointer';
          this.addEventListener('click', () => {
            if (href) {
              window.open(href, target);
            }
          });
        }
      },
    },
  });
};
